<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>divframe</title>
    <script type="text/javascript" src="js/jquery.2.1.4.js"></script>
    <script>
        $(function () {
            var width = $("#top").width();
            var height = $("#top").height();
            $("#topimg").css({"height": height, "width": width})

            $("button").next().hide();
            $("button").click(function () {
                $(this).next().slideToggle("fast");
            });
        });
    </script>
    <style>
        ul {
            list-style: none;
            margin: 0px;
            /*margin-bottom: 10px;*/
            padding: 0px;
            /*background-color:;*/
        }

        li {
            margin-top: 8px;
            margin-bottom: 8px;
            color: white;
            font: 14px Arial, Helvetica, sans-serif, "新宋体";
        }

        button {
            border: none;
            border-radius: 2px;
            display: block;
            width: 100%;
            height: 35px;
            background-color: #4b7ac9;
            color: white;
            text-align: left;
            white-space: nowrap;
            /*font-size: 15px;*/
            font: 14px Arial, Helvetica, sans-serif, "新宋体";
        }

        button:hover {
            background-color: #4473d2;
        }

        a {
            text-decoration: none;
        }

        body, div {
            margin: 0px;
            padding: 0px;
            border: none;
        }

        .lf {
            margin-left: 20px;
        }

        img {
            height: 18px;
            width: 18px;
            vertical-align: middle;
            margin-right: 5px
        }
    </style>
</head>
<body>

<div style="height: 100%;width: 100%;">
    <div id="top" style="height: 92px;width: 100%;border:none;margin: 0px;padding: 0px">
        <img id="topimg" src="img/top.jpg" style="margin: 0px;border: none">
    </div>
    <div style="float:left;height: 85%;width: 15%;text-align:left;background-color:#3b5998;">
        <ul style="margin:0px 5px 0px 5px">
            <li>
                <button><img src="icons/home.png">用户管理</button>
                <ul class="lf">
                    <a target="content" href="list.do">
                        <li><img src="icons/friends_group.png">用户列表</li>
                    </a>
                    <a href="#">
                        <li><img src="icons/star.png">项目二</li>
                    </a>
                    <a href="#">
                        <li><img src="icons/shield_protect_on.png">项目三</li>
                    </a>
                </ul>
            </li>

            <li>
                <button><img src="icons/record.png">分类二</button>
                <ul class="lf">
                    <li>项目一</li>
                    <li>项目二</li>
                    <li>项目三</li>
                </ul>
            </li>

            <li>
                <button><img src="icons/rss.png">分类三</button>
                <ul class="lf">
                    <li>项目一</li>
                    <li>项目二</li>
                    <li>项目三</li>
                </ul>
            </li>
        </ul>
    </div>
    <div style="height:85%;width:85%;float:left">
        <iframe name="content" style="height: 100%;width: 100%;border: none"></iframe>
    </div>
</div>

</body>
</html>
